import { useQuery } from '@apollo/client'
import Image from 'next/image'
import React from 'react'
import { useMoralis } from 'react-moralis'
import NFTBox from '../components/NFTBox'
import contractAddress from '../constant/networkUpdateHook.json'
import styles from '../styles/Home.module.css'
import GET_ACITVE from '../constant/subgraphQuery'

export default function Home() {
  // const { isWeb3Enabled } = useMoralis()
  // const { data: listedNfts, isFetching: fetchingListedNfts } = useMoralisQuery(
  //   // TableName
  //   // Function for the query
  //   'ActiveItem',
  //   query => query.limit(10).descending('tokenId')
  // )
  const { chainId, account, isWeb3Enabled } = useMoralis()
  const chainString = chainId ? parseInt(chainId).toString() : '31337'
  const NFTSHOPAddress = contractAddress[chainString].NFTSHOP[0]
  const { loading, error, data: ListedNfts } = useQuery(GET_ACITVE)

  return (
    <div className={styles.container}>
      <h1 className="py-4 px-4 font-bold text-2xl">Recently Listed</h1>
      <div className="flex flex-wrap">
        {isWeb3Enabled ? (
          loading || !ListedNfts ? (
            <div>Loading...</div>
          ) : (
            ListedNfts.activeItems.map(nft => {
              //  console.log(nft)
              const { price, nftaddress, tokenid, seller } = nft
              return (
                <NFTBox
                  price={price}
                  nftAddress={nftaddress}
                  tokenId={tokenid}
                  NFTShopAddress={NFTSHOPAddress}
                  seller={seller}
                  key={`${nftaddress}${tokenid}`}
                />
              )
            })
          )
        ) : (
          <div>Web3 Currently Not Enabled</div>
        )}
      </div>

      <footer className={styles.footer}>
        <a href="http://fengpangzi.top:9999" target="_blank" rel="noopener noreferrer">
          Powered by{'  hanxin'}
          <span className={styles.Logo}>
            <Image src="/happy.svg" alt=" Logo" width={20} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}
